<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- 移动设备 viewport -->
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui">
    <meta name="author" content="">
    <!-- 360浏览器默认使用Webkit内核 -->
    <meta name="renderer" content="webkit">
    <!-- 禁止百度SiteAPP转码 -->
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="msapplication-TileColor" content="#62a8ea">


    <script type="text/javascript" src="../res/assets/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="../res/assets/js/laydate/laydate.js"></script>
    <script type="text/javascript" src="../res/assets/js/echarts.js"></script>
    <script type="text/javascript" src="../res/assets/js/bootstrap.js"></script>

    <link rel="stylesheet" href="../res/assets/css/bootstrap.css">
    <link rel="stylesheet" href="../res/assets/css/index.css">
</head>
<style type="text/css">
    .widget {
        position: relative;
        margin-bottom: 24px;
        background-color: #fff
    }

    .widget {
        border-radius: 5px;
        margin-top: 5px;
    }

    .counter {
        text-align: center;
    }

    .bg-blue-600 {
        background-color: #62a8ea !important;
    }

    .bg-purple-600 {
        background-color: #926dde !important;
    }

    .bg-red-600 {
        background-color: #CC9900 !important;
    }

    .bg-orange-600 {
        background-color: #f2a654 !important;
    }

    .money-ex-40 {
        font-size: 30px;
        font-weight: 100;
    }

    .money-ex-40 span {
        font-size: 16px;
        font-weight: 100;
    }

</style>

<body>
<div class="test">
    <div class="row col-sm-12">
        <div class="main-item view-2" style="height: 15%; width: 100% ;float: left">
            <div class="row">
                <div class="col-md-10 text-left" style="margin-left: 5px;margin-top: 5px">
                    <form class="form-inline" id="searchVal">

                        <div class="form-group" style="float: right">
                            <button type="button" class="btn btn-primary" id="search">
                                <i class="icon wb-search" aria-hidden="true"></i> 搜索
                            </button>
                        </div>

                        <div class="form-group" style="float: right">
                            <label class="control-label">日期范围: </label>
                            <div class="input-group">
										<span class="input-group-addon">
                            <i class="icon wb-calendar"></i>
                        </span>
                                <input type="text" id="start_create_time" class="form-control" style="width: 150px"
                                       name="_start_create_time" autocomplete="off">
                            </div>
                            <div class="input-group" style="margin-left: -6px">
                                <span class="input-group-addon"> 至 </span>
                                <input type="text" id="end_create_time" class="form-control" style="width: 150px"
                                       name="_end_create_time" autocomplete="off">
                            </div>
                        </div>
                        <div class="form-group" style="float: right">
                            <label class="control-label">日期: </label>
                            <select class="form-control" id="data" name="chooseEnergy">
                                <option value="1">年</option>
                                <option value="2">月</option>
                                <option value="3">日</option>
                            </select>
                        </div>
                        <div class="form-group" style="float: right">
                            <label class="control-label">能源: </label>
                            <select class="form-control" id="chooseEnergy" name="chooseEnergy">
                                <option value="1">电</option>
                                <option value="2">水</option>
                            </select>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="row col-sm-12">
        <div class="main-item view-2" style="width: 100% ;float: left">
            <div class="row">
                <div class="col-sm-3 ">
                    <div class="widget" style="margin-bottom: 0px;margin-left: 5px">
                        <div class="widget-content padding-25 bg-blue-600">
                            <div class="counter counter-lg counter-inverse">
                                <div class="counter-label text-uppercase" id="nengyuan">电耗</div>
                                <span class="money-ex-40" id="energyDianhao"> 350<span>.00 kw/h</span></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class=" col-sm-3">
                    <div class="widget" style="margin-bottom: 0px;">
                        <div class="widget-content padding-25 bg-purple-600">
                            <div class="counter counter-lg counter-inverse">
                                <div class="counter-label text-uppercase" id="danwei">单位面积电消耗</div>
                                <span class="money-ex-40" id="energyDanwei"> 120<span>.00 kw/m2</span></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3 ">
                    <div class="widget" style="margin-bottom: 0px; ">
                        <div class="widget-content padding-25 bg-red-600">
                            <div class="counter counter-lg counter-inverse">
                                <div class="counter-label text-uppercase">已有楼数</div>
                                <span class="money-ex-40">4<span></span></span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class=" col-sm-3 ">
                    <div class="widget" style="margin-bottom: 0px;margin-right: 5px">
                        <div class="widget-content padding-25 bg-orange-600">
                            <div class="counter counter-lg counter-inverse">
                                <div class="counter-label text-uppercase">水电总耗</div>
                                <span class="money-ex-40">500000.<span>00</span></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12">

                </div>

            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-9">
            <div class="main-item view-2 col-sm-12 " style="float: left ;">
                <div class="widget-shadow">
                    <div id="main" style="height:450px;">
                    </div>
                </div>

            </div>
        </div>
        <div class="row col-sm-3" style="">
            <div class="main-item view-2" style="height: 450px">
                <table class="table">
                    <thead>
                    <tr>
                        <th>耗电排名</th>
                        <th>耗电总量（kw/h）</th>
                        <th>单位面积用量（kwh/m2）</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td style="cursor:pointer "><a class="lou" href="#" id="A" name="0">A座</a></td>
                        <td id="AData">350.00</td>
                        <td>11.00</td>
                    </tr>
                    <tr>
                        <td style="cursor:pointer "><a class="lou" href="#" id="B" name="1">B座</a></td>
                        <td id="BData">>340.00</td>
                        <td>10.00</td>
                    </tr>
                    <tr>
                        <td style="cursor:pointer "><a class="lou" href="#" id="C" name="2">C座</a></td>
                        <td id="CData">>325.00</td>
                        <td>9.00</td>
                    </tr>
                    <tr>
                        <td style="cursor:pointer "><a class="lou" href="#" id="D" name="3">D座</a></td>
                        <td id="DData">>315.00</td>
                        <td>8.50</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>

</div>


</body>

<script type="text/javascript">

    //显示图形下表的值
    var monthArray = ["2018-01", "2018-02", "2018-03", "2018-04", "2018-05", "2018-06", "2018-07"];

    var otherMonth = ["2017-05", "2017-06", "2017-08", "2017-09", "2017-10", "2017-11", "2017-12"];

    var AList = [11, 8, 7, 8.6,];
    var BList = [1.6, 1.5, 1.2, 1];

    var CList = [1.8, 1.9, 2.0, 3]
    var DList = [11, 8, 7, 8.6];

    var totalList = [];

    var showList = [[5, 8, 7, 8.6,], [11, 6, 7, 8.2,], [9, 8, 7, 8.3], [11, 5, 9, 8.6]];

    var showListOther = [20, 30, 15, 32, 16, 13, 12];

    var dom = "";

    //用于显示图形趋势的值
    var showData = [];
    option = {};


    $(function () {


        laydate.render({
            elem: '#start_create_time'
            , theme: '#393D49'
        });

        laydate.render({
            elem: '#end_create_time'
            , theme: '#393D49'
        });

        totalAccount();


        var myChart = echarts.init(document.getElementById('main'));
        var colors = ['#d14a61', '#5793f3', '#675bba'];//subtext,monthArray,totalSales
        showData = AList;
        initChart(myChart);


        //改变显示值
        $("#chooseEnergy").change(function () {
            var val = $("#chooseEnergy").val()
            if (val == 2) {
                $("#nengyuan").html("水消耗")
                $("#danwei").html("单位水耗")
                $("#energyDianhao").html(" 150<span>.00 吨</span>")
                $("#energyDanwei").html("10<span>.00 吨/m2</span>")
            } else {
                $("#nengyuan").html("电耗")
                $("#danwei").html("单位面积电消耗")
                $("#energyDianhao").html("350<span>.00 kw/h</span>")
                $("#energyDanwei").html("20<span>.00  kw/m2</span>")

            }
            showData = showList[val]
            initChart(myChart);
        })


        //点击排名楼数变换值
        $(".lou").click(function () {
            var myChart = echarts.init(document.getElementById('main'));
            dom = $(this).html();
            var value = $(this).attr("name");
            showData = showList[value]
            initChart(myChart);
        })

        $("#search").click(function () {
            var Startdate = $("#start_create_time").val();
            var endStart = $("#start_create_time").val();

            monthArray = otherMonth;
            showData = showListOther
            initChart(myChart);
        })

    })


    //统计右侧耗电排名
    function totalAccount() {
        var Atotal = 0;
        var Btotal = 0;
        var Ctotal = 0;
        var Dtotal = 0;
        $.each(AList, function (indexs, itema) {
            Atotal += AList[indexs]

        });
        $("#AData").html(Atotal)
        $.each(BList, function (indexs, itema) {
            Btotal += BList[indexs]
        });
        $("#BData").html(Btotal)
        $.each(CList, function (indexs, itema) {
            Ctotal += CList[indexs]
        });
        $("#CData").html(Btotal)
        $.each(DList, function (indexs, itema) {
            Dtotal += DList[indexs]
        });

        $("#DData").html(Dtotal)


        totalList.push(AList)
        totalList.push(BList)
        totalList.push(CList)
        totalList.push(DList)
    }


    //初始化图形
    function initChart(myChart) {
        option = {
            title: {
                text: dom + '各月电耗统计',

                x: 'left'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ["各月电耗"]
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: '50',
                top: 'center',
                feature: {
                    magicType: {show: true, type: ['line', 'bar']},
                    saveAsImage: {show: true}
                }
            },

            calculable: true,
            xAxis: [
                {
                    axisLine: {onZero: true, onZeroAxisIndex: 1},
                    type: 'category',
                    data: monthArray
                }
            ],
            yAxis: [
                {
                    //设置y轴最大值为数据的1.5倍
                    max: function (value) {
                        return Math.ceil(value.max * 1.3);
                    },
                    splitLine: {show: false},//去除网格线
                    name: '月份项电耗：kwh/m2 ',
                    type: 'value'
                }, {
                    //设置y轴最大值为数据的1.5倍
                    max: function (value) {
                        return Math.ceil(value.max * 1.5);
                    },
                    splitLine: {show: false},//去除网格线
                    type: 'value',
//                min: 0,
//                max: 250,
                    position: 'right',
//                offset: 80,
                    /*axisLine: {
                        lineStyle: {
                            color: colors[2]
                        }
                    },*/
                    axisLabel: {
                        formatter: '{value}'
                    }
                }
            ],
            series: [
                {
                    name: "各月电耗",
                    type: 'bar',
                    stack: '电耗',
                    itemStyle: {
                        normal: {
                            color: '#62a8ea'
                        }
                    },
                    data: showData
                },
            ]
        };
        myChart.setOption(option);
    }

</script>
</html>